<template>
    <div class="head">
        <div style='display:flex; align-items: center; justify-content: space-around; padding: 11px 0px; border-bottom: 1px solid #90939929;'>
            <p>选择班级:</p>
            <el-cascader v-model="this.Select" :options="this.$store.state.Class_clopedia" @change="handleChange" />
        </div>
        <div v-if="this.$store.state.generate.subject.length != 0">
            <div v-for="(item,index) in this.$store.state.generate.subject" :key="index" style="display: flex; justify-content: center;">
                <div style="border: 1px solid var(--el-border-color); width: 73%; padding: 28px;">
                    <div style="display: flex; justify-content: center; align-items: center;">
                        <div style="width: 72%;">
                            <h3>题目：</h3>
                            <h2 style="width: 100%; font-weight: bold; font-size: 20px; padding: 23px; display: flex; justify-content: center;">{{ item.q_title }}</h2>
                        </div>
                    </div>
                    <div style="width: 100%; display: flex; justify-content: center;" >
                        <el-radio-group v-model="item.User_Answer" v-for="(val,index) in item.answers">
                            <el-radio :value="val.a_id" style="margin:0px 10px; width: 200px;white-space: normal; " :disabled="item.disabled" @change="choice(item,val)">
                                <p style=" ">{{ val.a_item}}</p>
                            </el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <div style="width: 100%; display: flex; justify-content: center; padding: 50px;">
                <el-button type="success" @click="Submitanswers()">提交试卷</el-button>
            </div>
        </div>
        <div v-else>
            <el-empty description="暂无数据请选择班级" />
        </div>
    </div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
   components: {},
    data() {
        return {
            Disrupttopic:[],
            Examdata:false,
            Select:'',
        };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
      // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.$store.dispatch('compound_paper');
        this.$store.dispatch('Classinformation');
        this.$store.state.generate.subject.sort(() => Math.random() - 0.5);
        this.$store.state.generate.subject.forEach((item,index) =>{
            item['User_Answer'] = '';
            item['disabled'] = false;
            item['answer'] = 0
            item.answers.sort(() => Math.random() - 0.5);
        })
        // this.$message({
        //     message: '123132132wqasd',
        //     type: 'success',
        // })
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    // 方法集合
    methods: {
        handleChange(){
            this.$store.dispatch('Check_the_paper',this.Select)
            this.shuffleArray(this.$store.state.generate.subject)
        },
        choice(item,val){
            item.disabled = true
            console.log(val)
            if(val.a_correct == 1){
                item.answer = 20
            }
        },
        Submitanswers(){
            let answer = 0
            this.$store.state.generate.subject.forEach((item)=>{
                answer += item.answer
            })
            let Title = '及格'
            ElMessageBox.alert(`本次成绩为: ${answer}`, '成绩报告!', {
                confirmButtonText: 'OK',
                callback: (action) => {
                    ElMessage({
                        type: '成绩报告!',
                        message: `本次成绩为: ${Title}`,
                    })
                },
            })
            if(answer > 60){
                Title = '及格'
            }else{
                Title = '不及格'
            }
        },
        shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }
    },
    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
}
</script>
<style  scoped>
.el-radio{
    height: auto;
}
.head::-webkit-scrollbar {
  width: 0;
}
.head{
    width: 100%;
    height: 100%;
    box-shadow: var(--el-box-shadow-dark);
    overflow: auto;
}
</style>